<template>
  <div>
    <div class="header">
      <div class="product-heard-title subheading-heavy body-content">
        报表统计
      </div>
      <ul class="paragraph-p2-light">
        <li>
          <a :class="tab === reportListItemType.stock ? 'report-nav-active': '' "
             @click="tabCLick(reportListItemType.stock)"
          >现库存统计</a>
        </li>
        <li>
          <a :class="tab === reportListItemType.totalSale ? 'report-nav-active': '' "
             @click="tabCLick(reportListItemType.totalSale)"
          >总销售统计</a>
        </li>
        <li>
          <a :class="tab === reportListItemType.personalSale ? 'report-nav-active': '' "
             @click="tabCLick(reportListItemType.personalSale)"
          >个人销售统计</a></li>
      </ul>
    </div>
    <div class="margin-top-div-120">
      <div v-if="tab === reportListItemType.stock">
        <main-empty v-if="stock.profit === 0 && stock.cost ===0 && stock.productNum === 0" class="padding-top-div-117"
                    :list-code="reportListType"
                    :list-item-code="reportListItemType.stock"
        ></main-empty>
        <report-stock class="padding-top-div-24" :stock="stock" :key="key.stock"></report-stock>
      </div>
      <div v-if="tab === reportListItemType.totalSale">
        <report-sale-total class="padding-top-div-24" :key="key.totalSale"></report-sale-total>
      </div>
      <div v-if="tab === reportListItemType.personalSale">
        <report-sale-personal :key="key.personalSale"></report-sale-personal>
      </div>
    </div>
  </div>
</template>

<script>
import MainEmpty from "@/components/MainEmpty"
import ReportStock from '@/components/report/stock'
import ReportSaleTotal from '@/components/report/sale/total'
import ReportSalePersonal from '@/components/report/sale/personal'
import {getCurrentStockSummary} from "@/request/api";
import {Toast} from "vant";

export default {
  name: "ReportViewMain",
  components: {
    MainEmpty,
    ReportStock,
    ReportSaleTotal,
    ReportSalePersonal,
  },
  props: {},
  data() {
    return {
      tab: this.GLOBAL.listItemType.report.stock,
      reportListType: this.GLOBAL.listType.report,
      reportListItemType: this.GLOBAL.listItemType.report,
      key: {
        stock: new Date().getTime(),
        totalSale: new Date().getTime(),
        personalSale: new Date().getTime(),
      },
      stock: {
        productNum: 0,
        cost: 0,
        profit: 0,
      },
    };
  },
  mounted() {
    const queryTab = this.$route.query.tab
    this.tab = queryTab ? Number(queryTab) : this.GLOBAL.listItemType.report.stock
  },
  methods: {
    tabCLick(tab) {
      this.tab = tab
      this.$router.push(this.GLOBAL.pathSetting.report.main + '?tab=' + tab)
      switch (tab) {
        case this.reportListItemType.stock:
          this.key.stock = new Date().getTime()
          break
        case this.reportListItemType.totalSale:
          this.key.totalSale = new Date().getTime()
          break
        case this.reportListItemType.personalSale:
          this.key.personalSale = new Date().getTime()
          break
      }
    },
    getStock() {
      getCurrentStockSummary().then(res => {
        const { State, Data, Msg } = res
        if (State) {
          Data.forEach(stock => {
            const { name, amount } = stock
            if (name === '未出单商品量') {
              this.stock.productNum = amount
            }
            if (name === '库存成本(¥)') {
              this.stock.cost = amount
            }
            if (name === '毛利预算(¥)') {
              this.stock.profit = amount
            }
          })
        } else {
          Toast(Msg)
        }
      })
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.header {
  height: 120px;
  width: 100%;
  background: #fcd538;
  position: fixed;
  top: 0px;
  z-index: 3;
}

.product-heard-title {
  padding-top: 52px;
}

ul {
  padding-left: 16px;
  background-color: #fcd538;
  padding-top: 16px;
}

ul li {
  display: inline;
  margin-right: 24px;
  height: 22px;
  padding-bottom: 5px;
}

ul a {
  color: #424242;
  text-decoration: none;
}

</style>